<template>
  <div class="v-nav" :class="{'clear-height':$store.state.clearHeight}">
    <div class="v-nav-content" :class="{'clear-bg':$store.state.clearBG}">
      <el-row>
        <el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21">
          <el-menu
            :default-active="$store.state.activeIndex"
            mode='horizontal'
            @select='handleSelect'
            class="el-menu-demo el-menu-demo222"
            background-color="transparent"
            :text-color="textColor || '#c8c8c8'"
            active-text-color="#da0800"
          >
            <template v-for="(item,index) in navList">
              <el-col :key="index" :xs="!index?5:index==1?2:index==navList.length-1?6:index==3?3:4" :sm="!index || index==navList.length-1?6:3" :md="!index || index==navList.length-1?6:3" :lg="!index || index==navList.length-1?6:3" :xl="!index || index==navList.length-1?6:3">
                <el-menu-item :index="index+''">
                  <img :src="item.logo" v-if="!index" class="v-navlogimg" />
                  <span v-else>{{item.name}}</span>
                </el-menu-item>
              </el-col>
            </template>
          </el-menu>
        </el-col>
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" :span='3'>
          <div class="login">
            <img src="./v-nav03.png" class="v-nav-search01" />
            <img src="./v-nav02.png" class="v-nav-search02" />
            <cascader></cascader>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
import logo from "./logo.png";
import cascader from "../cascader/Cascader"
export default {
  props: {textColor: String},
  data() {
    return {
      navList: [
        { name: "", path: "", logo: logo },
        { name: "首页", path: "/" },
        { name: " 认证课程体系 ", path: "/course" },
        { name: "业务入口 ", path: "/business" },
        { name: "客户服务中心", path: "/companydynamics" },
        { name: "学员就业及人才服务", path: "/educationcentre" }
      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$store.commit('changeActiveIndex',{key})
      this.$router.push(this.navList[key].path);
      this.$store.commit('changeNavStatus',false)
    }
  },
  components:{
    cascader
  }
};
</script>
<style lang="stylus">
.v-nav
  height 88px;
  .v-nav-content 
    position fixed;
    z-index 999;
    display flex;
    justify-content space-between
    flex-wrap nowrap
    left 0;
    top 0;
    height 88px;
    padding 0 120px
    width 100%
    background-color: #000000;
    // .el-menu-demo222
    //   height 100%
    //   border-bottom none!important;
    //   .el-menu-item
    //     height 100%
    //     display flex
    //     align-items center
    //     &:hover
    //       background rgba(204,204,204,.2) !important
    //     &:first-child
    //       margin-right 178px;
    //   .v-navlogimg
    //     width 166px;
    //     height 60px;
    // .login
    //   display flex;
    //   align-items center
    //   .v-nav-search01
    //     width 15px
    //     height 16px
    //   .v-nav-search02
    //     width 20px
    //     height 10px
    //     margin-left 19px

    .el-row
      height 100%;
      width 100%;
      .el-col
        height 100%;
        .el-menu-demo222
          height 100%
          border-bottom none!important;
          .el-menu-item
            height 100%
            display flex
            align-items center
            text-align center
            &:hover
              background rgba(204,204,204,.3) !important
            &>span 
              display flex;
              width 100%;
              justify-content center;
          .v-navlogimg
            width 166px;
            height 60px;
        .login
          display flex;
          align-items center
          height 100%
          .v-nav-search01
            width 15px
            height 16px
          .v-nav-search02
            width 20px
            height 10px
            margin-left 19px
.clear-height
  height 0
  .clear-bg
    background-color transparent !important
</style>
